<template>
  <div class="otherPayPage">
    <div class="headerBox">
      <van-nav-bar title="报单" left-arrow @click-left="goBack" />
    </div>
    <div class="formBox">
      <van-cell title="矿机份数" :value="ruleForm.orderQuantity+'份'" />
      <van-cell title="订单金额" :value="'￥'+ruleForm.orderTotalPrice" />
      <van-field input-align="right" v-model="ruleForm.policyPaymentMethod" label="支付方式" placeholder="请输入支付方式，如银行转账等" />
      <van-field input-align="right" v-model="ruleForm.policySerialNumber" label="流水号" placeholder="请输入交易流水号" />
      <van-field input-align="right" v-model="ruleForm.orderRemark" label="备注说明" placeholder="请输入其它备注信息" />
      <van-field input-align="right" name="uploader" label="上传凭证">
        <template #input>
          <van-uploader :after-read="afterRead" >
            <img :src="ruleForm.policyCertificateImg" class="imgPreview" v-if="ruleForm.policyCertificateImg">
          </van-uploader>
        </template>
      </van-field>
    </div>
    <div class="handlerBox">
      <p class="handlerBtn" @click="submit">提 交</p>
    </div>
  </div>
</template>


<script>
import selfFunc from '@/utils/common.js'
export default {
  data() {
    return {
      policyCertificateImg:[],
      goodsDetail:{},
      otherForm:{
        orderRemark:'',
        policyPaymentMethod:'',
        policyCertificateImg:'',
        policySerialNumber:''
      },
      ruleForm:{}
    };
  },
  created() {
    this.goodsDetail=JSON.parse(decodeURIComponent(this.$route.query.info))
    console.log(this.goodsDetail)
    this.ruleForm = {...this.goodsDetail,...this.otherForm}
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async afterRead(val) {
      let file = val.file
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$toast("上传图片大小不能超过 20MB!");
      }
      console.log(file)
      let myform = new FormData();
      myform.append("file", file);
      let res = await this.$http.ossImg(myform);
      if (res) {
        this.ruleForm.policyCertificateImg = res.data.src;
        this.policyCertificateImg = [res.data.src]
      }
    },
    submit:selfFunc.throttle(async function(){
      if(!this.ruleForm.policyPaymentMethod){
        this.$toast("请输入支付方式")
        return
      } else if (!this.ruleForm.policyCertificateImg) {
        this.$toast("请上传交易凭证")
        return
      }
      let res = await this.$http.taxationFormPayOrder({...this.ruleForm});
      if (res) {
        this.$toast('提交成功')
        this.$router.push({name:'myOrderDetail',query:{orderId:this.goodsDetail.orderId}})
      }
    },1500),
  }
};
</script>
<style scoped>
.otherPayPage{
  min-height: 100vh;
  background: #fff;
}
.handlerBox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 2px solid #F1F1F1;
}
.handlerBtn{
  width: 6.94rem;
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size:0.34rem;
  background: #F6741F;
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.imgPreview{
  width: 80px;
  height: 80px;
}
</style>
